<template>
    <div id="app">
    <div id="drag" :style="{
      left:left+'px',
      top: top+'px'
    }" @mousedown="onMouseDown">
    </div>
  </div>
</template>
<script src="./vue.js"></script>
<script>
export default {
    el: "#app",
    data() {
      return {
        left: 0,
        top: 0,
      }
    },
    created() {
      /* 指向vue实例 */
      const that = this;
      var _this;
      class Drag {
        constructor() {
          /* 指向构造函数 */
          _this = this;
          /* 记录鼠标点击位置 */
          this.startX = 0;
          this.startY = 0;

          /* 绑定vue实例中的事件 */
          that.onMouseDown = this.onMouseDown;
        }
        /* 鼠标按下 */
        onMouseDown(e) {
          /* 记录当前元素初始位置 */
          _this.startX = e.clientX - e.target.offsetLeft;
          _this.startY = e.clientY - e.target.offsetTop;
          e.target.onmousemove = _this.onMouseMove;
          e.target.onmouseup = _this.onMouseUp;
        }
        /* 鼠标移动 */
        onMouseMove(e) {
          that.left = e.clientX - _this.startX;
          that.top = e.clientY - _this.startY;
        }
        /* 鼠标抬起 */
        onMouseUp(e) {
          /* 清除移动与抬起事件 */
          e.target.onmousemove = null;
          e.target.onmouseup = null;
        }
      }
      new Drag();
    },
}
</script>

<style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    html,
    body,
    #app {
      width: 100%;
      height: 100%;
      position: relative;
    }

    #drag {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: red;
    }

</style>